<template>
  <div>
    <!--
      vue项目的一个本质理念: 数据驱动视图 （在做任何需求时，首选通过数据来修改）
      在vue的<script>标签中，如果想要访问data中的数据，或者调用methods中的方法，需要在前面加上this
      在<template>模板中，则不需要加this

      v-on 事件绑定
      语法： v-on:事件名="简单的函数执行体" => 只有一行代码
            v-on:事件名="methods中定义的方法"
            v-on:事件名="methods中定义的方法(实际参数)"
      简写: v-on: => @     @事件名="methods中定义的方法"
    -->
    <p>{{ count }}</p>

    <button v-on:click="count++">点击加一</button>
    <button v-on:click="addCount2">点击加二并打印</button>
    <button v-on:click="addCountN(5)">点击加5</button>
    <button @click="addCountN(7)">点击加7</button>
    <br />

    <!-- 
      v-on获取事件对象 通过事件对象来做一些限制(阻止默认事件，阻止事件冒泡)
        dom.onclick((event) => { 就可以通过默认的event形参来获取到事件对象 })

        v-on:click="goUrl" => goUrl (event) {}
      
      语法：
      总结经验： 如果方法不需要传参，那么不要去写小括号
      1. 无参数状态 => @click="goUrl" 在v-on指令后绑定方法时不加小括号的形式
                      在定义方法时默认的事件对象在第一个形参上
      2. 有参数状态(绑定方法时后面有括号的形式) => @click="goUrl2()"
                                                在定义方法时主动传递事件对象 @click="goUrl2($event)"
                                                使用时，对应实参位置设置新参即可使用
         原因: 只要在使用方法时打上小括号，就会覆盖原本vue默认设置在第一个形参上的事件对象参数
    -->
    <a @click="goUrl" href="http://www.baidu.com">http://www.baidu.com</a>
    <a @click="goUrl2($event)" href="http://www.baidu.com">有参数</a>

    <!-- 
      事件修饰符
      语法： @事件名.修饰符="方法"
            @click.prevent="preventFn" => 阻止默认事件 => 最为常用的修饰符
            @click.stop="stopFn" => 阻止事件冒泡 => 一般
            @click.once="onceFn" => 绑定的事件只有一次有效 => 罕见
    -->
    <div @click="fatherFn">
      <p @click.stop="stopFn">stop - 阻止事件冒泡</p>
      <a @click.prevent.stop href="http://www.baidu.com">http://www.baidu.com</a>
      <p @click.once.stop="onceFn">当前事件只触发一次</p>
    </div>

    <!-- 
      键盘事件的按键修饰符
      @keyup.enter => 监听回车按键，只有按下回车时才会触发绑定的方法
      @keyup.esc =>   监听返回按键，只有按下返回时才会触发绑定的方法
    -->
    <input type="text" @keyup.enter="keyupFn" />
    <input type="text" @keyup.esc="keyupFn2" />
  </div>
</template>

<script>

export default {
  name: 'DemoIndex03',
  data () {
    return {
      count: 0
    }
  },

  // vue组件的方法定义在methods对象中
  methods: {
    // 点击加二并打印
    addCount2 () {
      this.count += 2
      console.log(this.count)
    },

    // 点击加按钮传递过来的数字
    addCountN (num) {
      this.count += num
    },

    // 阻止跳转百度 （阻止默认事件）
    goUrl (event) {
      console.log(event)
      // 阻止默认事件
      event.preventDefault()
    },

    goUrl2 (event) {
      console.log(event)
      // 阻止默认事件
      event.preventDefault()
    },

    // 父盒子的点击事件(事件冒泡)
    fatherFn () {
      console.log('触发了事件冒泡')
    },

    // 阻止事件冒泡
    stopFn () {
      console.log('stop方法被触发了')
    },

    // 只执行一次
    onceFn () {
      console.log('观察执行了多少次')
    },

    // 键盘事件
    keyupFn () {
      console.log('敲下了回车')
    },

    keyupFn2 () {
      console.log('敲下了返回')
    }
  }
}
</script>

<style>

</style>